<template>
	<view id="tmpl">
		<view class="category-list">
			<view v-for="item in list">
				<view class="category-item" :class="[item.index == index ? 'active' : '',item.index == 0 ?'none-border' : '']"
				 @click="change_value(item)">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: 0
		},
		data() {
			return {
				list: [{
						index: 0,
						title: '公司新闻',
						url: 'news'
					},
					{
						index: 1,
						title: '通告',
						url: 'notice'
					},
					{
						index: 2,
						title: '通报',
						url: 'report'
					},
					{
						index: 3,
						title: '安全期刊',
						url: 'periodical'
					}
				]
			}
		},
		methods: {
			change_value(elem) {
				this.$emit('on_change', elem);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-list {
		background-color: #fff;
		@extend .flex-between;
		border-top: solid 1px #e0e0e0;
		border-bottom: solid 1px #e0e0e0;
		position: fixed;
		width: 100%;
		margin-top: calc(var(--status-bar-height) - 10upx);
		z-index: 9999;

		.category-item {
			text-align: center;
			width: 25vw;
			height: $line-height-3;
			line-height: $line-height-3;
			font-size: $uni-font-size-base;
			border-left: solid 1px #e0e0e0;

			text {
				color: rgba(0, 0, 0, .5);
			}
		}

		.active {
			text {
				color: $font-color-2;
			}
		}

		.none-border {
			border: none;
		}
	}
</style>
